<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>隐藏属性(hide attributes)</title>
  <!-- 
    CSS中的隐藏属性（hide attributes）通常通过设置元素的display属性来隐藏元素。以下是关于隐藏属性的说明总结： 
 
      1. display: none;  
        - 使用display属性设置为none可以完全隐藏元素，元素不会在页面上显示，并且不占据任何空间。 
      2. visibility: hidden; 
        - 使用visibility属性设置为hidden可以隐藏元素，但元素仍然占据页面布局空间，只是不可见。 
      3. color: module; color: #ff000088; 
        - 使用color属性设置为module或透明色可以隐藏元素，但元素仍然占据页面布局空间。 
      4. background-color: rgba(0, 0, 0, 0);
      5. opacity: 0; 
        - 使用opacity属性设置为0可以使元素完全透明，看不到元素的内容，但元素仍然占据页面布局空间。 
      6. overflow: hidden; 
        - 使用overflow属性设置为hidden可以隐藏元素的内容，但元素仍然占据页面布局空间。 
      7. position: absolute; 
        - 使用position属性设置为absolute或fixed可以使元素完全隐藏在页面中，不占据任何空间。 
      8. z-index: -1;
        - 使用z-index属性设置为负数可以使元素完全隐藏在页面中，不占据任何空间。 
      9. transform: scale(0); 
        - 使用transform属性设置为缩放为0可以隐藏元素，但元素仍然占据页面布局空间。
        
    注意：使用display: none;隐藏元素后，元素的宽度和高度都会变为0，而使用visibility: hidden;隐藏元素后，元素的宽度和高度仍然保持不变。 
    另外，使用opacity: 0;隐藏元素后，元素的宽度和高度仍然保持不变。
   -->
  <style>
    body {
      background-color: bisque;
    }

    /* 显示 - 不占据空间 */
    .display-none {
      display: none;
    }

    /* 可见度 - 占据页面布局空间  */
    .visibility-hidden {
      visibility: hidden;
    }

    /* 颜色透明度(无法隐藏图片) - 占据页面布局空间  */
    .alpha-hide {
      /* 不推荐: color: module; color: #ff000088; */
      /* 推荐: color: rgba(0,0,0,0); */
      color: rgba(0, 0, 0, 0);
      /* background-color: rgba(0, 0, 0, 0); */
      background-color: transparent;
    }

    /* 透明度 - 占据页面布局空间  */
    .opacity {
      opacity: 0;
    }

    /* 内容溢出隐藏 - 占据页面布局空间  */
    .overflow {
      width: 0;
      height: 0;
      overflow: hidden;
    }

    /* z-index - 不占据空间  */
    .z-index-box {
      background-color: blueviolet;
    }

    .z-index {
      position: relative;
      z-index: -1;
    }

    /* 缩放 - 占据页面布局空间 */
    .transform-scale {
      width: 200px;
      height: 200px;
      background-color: aqua;
      transform: scale(0);
    }
  </style>
</head>

<body>

  <div class="display-none">my name class display-none</div>
  <div>display attribute</div>

  <div class="visibility-hidden">my name class visibility-hidden</div>
  <div>visibility attribute</div>

  <div class="alpha-hide">
    my name class alpha-hide
    <img src="../../images/gouwujie01.jpg" alt="" srcset="">
  </div>

  <div class="opacity">
    my name class opacity
    <img src="../../images/muxing.jpg" alt="" srcset="">
  </div>

  <div class="overflow">
    my name class overflow
    <img src="../../images/music_album01.jpg" alt="" srcset="">
  </div>

  <div class="z-index-box">
    <div class="z-index">
      my name class z-index
      <img src="../../images/music_album01.jpg" alt="" srcset="">
    </div>
  </div>

  <div class="transform-scale">
    my name class transform-scale
    <img src="../../images/music_album01.jpg" alt="" srcset="">
  </div>

</body>

</html>